﻿/// <reference path = "Base.ts" />
namespace VantCellTypes {
    interface GridItemData{
        value: any;
        text: string;
        icon: any;
        sourceIcon: Icon;
        dot: boolean;
        sourceBadge: string;
        badge: any;
        click: Function;
    }

    interface GridCellTypeParam {
        ClickCommand: Forguncy.Plugin.ICustomCommandObject;
        useBinding: boolean;
        options: GridItemData[];
        bindingOptions: any;
        direction: "horizontal" | "vertical";
        columnNum: number;
        iconSize: number;
        gutter: number;
        border: boolean;
        center: boolean;
        square: boolean;
        reverse: boolean;
    }

    export class GridCellType extends VantCellTypeBase<GridCellTypeParam> {
        public onPageLoaded(info: Forguncy.Plugin.CellTypeInfo) {
            const self = this;
            this.addCustomClass("vant-grid-custom");
            const cellType = this.cellType;

            let gridItems: GridItemData[] = [];
            if (!cellType.useBinding && cellType.options) {
                const permission = this.getUIPermission(Forguncy.Plugin.UIPermissionScope.Visible);
                const filteredOptions = this.filterOptionsByPermission(cellType.options, permission.Children);
                gridItems = self.uniqueKeyCreator(filteredOptions.map(i => self.createItem(i)), "text");
            }

            const contentStr = this.getCustomSlotByPath(SlotPath.gridItemContent);

            const option = {
                el: "#" + this.uId,
                template: `
<van-grid
    :column-num="columnNum"
    :gutter="gutter"
    :border="border"
    :center="center"
    :square="square"
    :clickable="clickable"
    :direction="direction"
    :icon-size="iconSize"
    :reverse="reverse">
    <van-grid-item
        :key="option.key"
        v-for="(option, index) in gridItems"
        :text="option.text"
        :icon="option.icon"
        :dot="showAsDot(option)"
        :badge="option.badge"
        @click="option.click">
        ${ contentStr }
    </van-grid-item>
</van-grid>
`,
                data() {
                    return {
                        columnNum: cellType.columnNum,
                        gutter: cellType.gutter,
                        border: !!cellType.border,
                        center: !!cellType.center,
                        square: !!cellType.square,
                        reverse: !!cellType.reverse,
                        clickable: cellType.ClickCommand?.Commands?.length > 0,
                        direction: cellType.direction,
                        iconSize: cellType.iconSize,
                        gridItems: gridItems,
                    };
                },
                methods: {
                    showAsDot(gridItem: any) {
                        return self.isEmpty(gridItem.badge) ? false : !!gridItem.dot;
                    }
                },
                mounted() {
                    self.fontDom = self.container.find(".van-grid-item__text");
                }
            };

            this.createVueApp(option);

            this.onDependenceCellValueChanged(() => {
                for (const item of this.vue.gridItems) {
                    if (this.isFormula(item.sourceBadge)) {
                        item.badge = self.evaluateFormula(item.sourceBadge);
                    }
                }
            });

            if (cellType.useBinding) {
                SupportDataSourceCellType.refreshData(this, cellType.bindingOptions, dataSource => {
                    this.vue.gridItems = this.uniqueKeyCreator(dataSource.map(i => this.createItem(i)), "text");
                    this.calcIcon(this.vue.gridItems);
                    this.vue.$nextTick(() => {
                        this.fontDom = this.container.find(".van-grid-item__text");
                    });
                });
            }
            else {
                this.calcIcon(this.vue.gridItems);
            }
            super.onPageLoaded(info);
        }

        private filterOptionsByPermission(options: GridItemData[], permissions: Forguncy.Plugin.SubUIPermission[]): GridItemData[] {
            if (!permissions) {
                return options;
            }
            return options.filter((option, index) => {
                if (permissions[index]) {
                    return this.checkRoleAuthority(permissions[index].AllowRoles);
                }
                return true;
            });
        }

        public calcIcon(items: GridItemData[]) {
            for (const item of items) {
                if (item.sourceIcon) {
                    IconHelper.getIcon(item.sourceIcon, icon => {
                        item.icon = icon;
                    });
                }
            }
        }
        public createItem(sourceData: GridItemData): GridItemData {
            const cellType = this.cellType;

            const result = <GridItemData>{
                value: sourceData.value,
                text: sourceData.text,
                icon: null,
                sourceIcon: sourceData.icon,
                dot: sourceData.dot,
                sourceBadge: sourceData.badge,
                badge: this.evaluateFormula(sourceData.badge)
            };

            const clickCommands = cellType.ClickCommand;
            if (clickCommands?.Commands?.length > 0) {
                result.click = () => {
                    const param = {};
                    param[clickCommands.ParamProperties["value"]] = sourceData.value;
                    param[clickCommands.ParamProperties["text"]] = sourceData.text;
                    this.executeCustomCommandObject(clickCommands, param, "Click" + sourceData.value);
                };
            }
            return result;
        }

        // RunTimeMethod
        public SetBadge(itemValue, badgeValue) {
            for (const item of this.vue.gridItems) {
                const gridItem = <GridItemData>item;

                // eslint-disable-next-line
                if (gridItem.value == itemValue) {
                    item.badge = badgeValue?.toString();
                }
            }
        }
    }
}

Forguncy.Plugin.CellTypeHelper.registerCellType("Vant.CellTypes.Grid, Vant", VantCellTypes.GridCellType);